<template>
	<view>
		<cu-custom :bgColor="globalColor" :isBack="true">
		    <block slot="content">图片去水印</block>
		</cu-custom>
		<view class="solids video padding-sm" v-if="!result">
			<view @tap="upload">
				<text class='cuIcon-cameraadd' style="font-size: 40px;"></text>
			</view>
			<view @tap="upload">
				<text>点我上传图片去水印</text>
			</view>
		</view>
		<view class="content padding-sm bg-white font-color">
			<p>1、图片去水印质量与您的图片息息相关，不同的图片去水印效果可能天差地别</p>
			<p>2、图片去水印选择区域可能会有一点不顺手，后期我们会继续优化哦</p>
			<p>3、有任何好的建议，请反馈给我们，我们会继续优化的。</p>
			<p>4、去水印成功后，点击图片就可以预览哦，预览之后长按图片即可保存</p>
		</view>
		<view class="content padding-sm bg-white remo-color">
			<p>5、如果是其他短视频平台的图集，请直接去首页复制链接解析 本页面只为本地图片去水印</p>			
		</view>
			
		<cropper :imagePath="tempFilePath" :aspectRatio="1" @complete="complete" @cancel="cancel" v-if="handleFaceStatus"></cropper>
		
		<view v-if="!handleFaceStatus" class="img">
			<image :src="resultImg" mode="aspectFit" @click="previewPic"></image>
		</view>
		<ad v-if="showAd" :unit-id="indexAd" ad-type="video" ad-theme="white"></ad>
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import Cropper from '@/components/cropper/cropper.vue';
	export default {
	    data() {
	        return {
	            tempFilePath: '',
	            cropFilePath: '',
				result:false,
				text:'',
				handleFaceStatus:false,
				resultImg:'',
				globalColor: getApp().globalData.globalColor
	        }
	    },
	    components: {Cropper},
	    methods: {
	        upload() {
				var that = this;
	            uni.chooseImage({
	                count: 1, //默认9
	                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	                sourceType: ['album'], //从相册选择
	                success: (res) => {
	                    this.tempFilePath = res.tempFilePaths.shift()
						that.handleFaceStatus = true;
	                }
	            });
	        },
			previewPic() {
				var that = this;
				uni.previewImage({
						urls: [that.resultImg],
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
				});
			},
	        cancel() {
				this.result = false
	            this.handleFaceStatus = false
	        },
			complete() {
				var that = this;
				uni.showLoading({
					title:'处理中'
				})
				var globaData = getApp().globalData;
				uni.uploadFile({
					url: that.$qrCodeUrl + "/upload/file", //仅为示例，非真实的接口地址
					filePath: that.tempFilePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						var uploadData = JSON.parse(res.data).data;
						console.log(uploadData)
						//开始执行去水印操作
						wx.login({
						  success (res) {
							const code = res.code; 
							uni.request({
								url:  that.$qrCodeUrl+'/upload/clearPic',
								data: {
								  x: globaData.x,
								  y:globaData.y,
								  width:globaData.width,
								  height:globaData.height,
								  filePath:uploadData,
								  source:that.$source,
								  code:code
								},
								method:"POST",
								success: (res) => {
									//视频大小超过50M
									if(res.data.code === '0001') {
										console.log(res.data)
										that.handleFaceStatus = false
										that.resultImg = res.data.data
									}else {
										uni.showModal({
											content:'未知错误，请联系作者进行解决'
										})
									}
								},
								complete(res) {
									uni.hideLoading();
								}
							});
						  }
						})	
					},
					fail() {
						uni.hideLoading()
					}
				});
			},
			startDownLoad(type,fileUrl) {
				var that = this;
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						uni.showLoading({
							title:'加载下载资源中'
						})	
						//请求视频真实地址
						uni.request({
							url:  that.$reqUrl+'/lyz/getFileUrl',
							method:"POST",
							data:{
								link:fileUrl,
								type:type,
								source:that.$source
							},
							success: (res) => {
								if(res.data.code === '0001') {
									const downloadTask = uni.downloadFile({
										url: res.data.data, //仅为示例，并非真实的资源
										success: (res) => {
											if (res.statusCode === 200) {
												uni.saveImageToPhotosAlbum({
													filePath: res.tempFilePath
												})
											}
										},
										fail:function(){
											uni.showModal({
												content:'下载失败，请复制无水印链接到浏览器下载'
											})
										}
									});
								}else {
									uni.showModal({
										content:'资源文件暂时无法下载 请复制链接到浏览器下载 有疑问请联系微信 '
										+getApp().globalData.author
									})
									
								}		
							},
							complete: () => {
								uni.hideLoading();
							}
						});
					},
					fail: (res) => {
						uni.showModal({
							content:'您没有同意相册权限,视频无法保存[请点击小程序右上角设置按钮 开启相册权限]'
						})
					}
				})
			}
	    }
	}
</script>

<style>
	.video {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100px;
		background: white;
	}
	
	.img {
		width: 100%;
		text-align: center;
	}
	
	.font-color {
		color: #0081FF;
	}
	
	.remo-color {
		color: red;
	}
</style>
